<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="线下面试" name="first">
        <el-card class="mt15 mb15">
          <div slot="header" class="clearfix">
            <span class="f16 fb">面试日程</span>
          </div>
          <div class="search-filter">
            <el-row :gutter="20">
              <el-col :span="6">
                <sitem label="职位名称：">
                  <el-input slot="item" v-model="listQuery.jobName" placeholder="请输入关键字" @input="handleFilter" />
                </sitem>
              </el-col>
              <el-col :span="6">
                <sitem label="应聘者姓名/电话：">
                  <el-input slot="item" v-model="listQuery.nameOrPhone" placeholder="请输入关键字"
                    @input="handleFilter" />
                </sitem>
              </el-col>
              <el-col :span="6">
                <sitem label="面试日期：">
                  <el-select slot="item" v-model="listQuery.dayFlag" clearable placeholder="请选择"
                    @change="handleFilter">
                    <el-option v-for="(item,index) in days" :key="index" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </sitem>
              </el-col>
              <el-col :span="6">
                <sitem>
                  <el-button slot="item" v-waves class="filter-item" type="primary" icon="el-icon-search"
                    @click="handleFilter">
                    搜索
                  </el-button>
                </sitem>
              </el-col>
            </el-row>
          </div>

          <el-table :key="tableKey" v-loading="listLoading" :data="list" fit stripe highlight-current-row
            style="width: 100%;">
            <el-table-column label="序号" align="center" type="index" width="50" />
            <el-table-column label="面试时间" prop="time" width="180px" align="center" />
            <!-- <el-table-column label="面试方式" width="120" align="center">
              <template slot-scope="{row}">
                <span>{{ row.type?"视频面试":"现场面试" }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="应聘者" width="120px" align="center">
              <template slot-scope="{row}">
                <span class="link-type" @click="viewInfo(row)">{{ row.userInfo.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="电话" width="120px" align="center" prop="userInfo.phone" />
            <el-table-column label="职位" width="250px" align="center" prop="job.jobName" />
            <el-table-column label="企业" width="250px" align="center" prop="enInfo.enName" />
            <el-table-column label="联系人" width="120px" align="center" prop="contact.userName" />
            <el-table-column label="状态" class-name="status-col" width="120" align="center">
              <template slot-scope="{row}">
                {{ row.state | statusFilter }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width"
              width="240px">
              <template slot-scope="{row,$index}">
                <el-button v-if="row.timeFlag" type="text" :disabled="row.state == 2 || row.state==3"
                  @click="markRes(row,$index)">
                  反馈面试结果
                </el-button>
                <el-popover v-else :ref="row.id" placement="left" width="410" trigger="click">

                  <el-date-picker v-if="row.type" v-model="dataTimeArr" class="width100" type="datetimerange"
                    start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions2" :default-time="['08:00:00', '20:00:00']"
                    @change="modifyTime(row,true)" />
                  <el-date-picker v-else v-model="dataTime" class="width100" type="datetime"
                    default-time="08:00:00" placeholder="选择时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions" @change="modifyTime(row,false)" />


                  <!-- <el-button type="primary" class="ml10" @click="modifyTime(row)">确定</el-button>
                  <el-button class="ml10" @click="closeTime(row)">取消</el-button> -->
                  <el-button slot="reference" type="text">修改面试时间</el-button>
                </el-popover>
                <!-- <el-button v-if="!row.timeFlag && row.type" type="text" class="ml10" @click="openVideoView(row.id)">
                  视频面试
                </el-button> -->
                <!-- <el-button class="ml10" type="text" @click="markEntry(row,$index)">
                  视频面试
                </el-button> -->
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total>0" :total="total" next-text="下一页" layout="prev, pager, next, jumper"
            :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getList" />

          <!-- <pdf-dialog ref="pdfDialog" @transportShow="transportShow" @employShow="employShow" @markRes="markRes"
            @interviewShow="interviewShow" @refresh="refresh" />
          <forward-drawer ref="transportDrawer" @refresh="refresh" />
          <interview-results-drawer ref="resDrawer" @refresh="refresh" />
          <interview-drawer ref="interviewDrawer" @refresh="refresh" />
          <employ-drawer ref="employDrawer" @refresh="refresh" /> -->
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="视频面试" name="second">
				<div class="search-filter">
					<el-row :gutter="20">
						<el-col :span="6">
							<sitem label="会议室：">
								<el-select slot="item" v-model="listQuery.roomId" clearable placeholder="请选择会议室">
									<el-option v-for="(item,index) in roomList" :key="index" :label="item.label"
										:value="item.value" />
								</el-select>
							</sitem>
						</el-col>
						<el-col :span="6">
							<sitem label="职位名称：">
								<el-input slot="item" v-model="listQuery.jobName" placeholder="请输入关键字"
									@input="handleFilter" />
							</sitem>
						</el-col>
						<el-col :span="6">
							<sitem label="企业名称：">
								<el-input slot="item" v-model="listQuery.enName" placeholder="请输入关键字"
									@input="handleFilter" />
							</sitem>
						</el-col>
						<el-col :span="6">
							<sitem label="应聘者姓名/电话：">
								<el-input slot="item" v-model="listQuery.nameOrPhone" placeholder="请输入关键字"
									@input="handleFilter" />
							</sitem>
						</el-col>
						<el-col :span="6">
							<sitem label="面试日期：">
								<el-select slot="item" v-model="listQuery.dayFlag" clearable placeholder="请选择"
									@change="handleFilter">
									<el-option v-for="(item,index) in days" :key="index" :label="item.label"
										:value="item.value" />
								</el-select>
							</sitem>
						</el-col>
						<el-col :span="6">
							<sitem>
								<el-button slot="item" v-waves class="filter-item" type="primary" icon="el-icon-search"
									@click="handleFilter">
									搜索
								</el-button>
							</sitem>
						</el-col>
					</el-row>
				</div>

				<el-table :key="tableKey" v-loading="listLoading" :data="list" fit stripe highlight-current-row
					style="width: 100%;">
					<el-table-column label="序号" align="center" type="index" width="50" />
					<el-table-column label="会议室ID" prop="conferenceRoomVO.huaweId" width="100px" align="center" />
					<el-table-column label="面试批次" prop="conferenceRoomBatchVO.batchName" width="150px" align="center" />
					<el-table-column label="面试编号" prop="interviewNo" width="80px" align="center" />
					<el-table-column label="会议室名称" prop="conferenceRoomVO.roomName" width="150px" align="center" />
					<el-table-column label="面试时间" prop="time" width="180px" align="center" />
					<!-- <el-table-column label="面试方式" width="120" align="center">
						<template slot-scope="{row}">
							<span>{{ row.type?"视频面试":"现场面试" }}</span>
						</template>
					</el-table-column> -->
					<el-table-column label="应聘者" width="120px" align="center">
						<template slot-scope="{row}">
							<span class="link-type" @click="viewInfo(row)">{{ row.userInfo.name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="电话" width="120px" align="center" prop="userInfo.phone" />
					<el-table-column label="职位" width="250px" align="center" prop="job.jobName" />
					<el-table-column label="企业" width="250px" align="center" prop="enInfo.enName" />
					<el-table-column label="联系人" width="120px" align="center" prop="contact.userName" />
					<el-table-column label="面试结果" class-name="status-col" width="120" align="center">
						<template slot-scope="{row}">
							<template v-if="row.onLineState == 0">等待面试</template>
							<template v-else>{{ row.state | statusFilter }}</template>
						</template>
					</el-table-column>
          <el-table-column label="视频面试状态" width="120px" align="center" prop="onLineState_dictText">
            <template slot-scope="{row}">
              <template v-if="row.onLineState == 0">等待面试</template>
              <template v-if="row.onLineState == 2">面试中</template>
              <template v-if="row.onLineState == 1 && row.viewResult != 0 && row.viewResult != 1">面试结束</template>
              <template v-if="row.onLineState == 1 && (row.viewResult == 0 || row.viewResult == 1)">
                <template v-if="row.viewResult == 0">面试通过</template>
                <template v-if="row.viewResult == 1">面试未通过</template>
              </template>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" class-ame="small-padding fixed-width" width="240px"
						fixed="right">
						<template slot-scope="{row,$index}">
              <el-button v-if="row.onLineState == 0" type="text" class="ml10"
								@click="viewStart(row.id)">
								开始面试
							</el-button>
              <el-button v-if="row.onLineState == 1" type="text" class="ml10"
								@click="viewStart(row.id)">
								重新面试
							</el-button>
              <el-button v-if="row.onLineState == 2" type="text" class="ml10"
								@click="viewEnd(row.id)">
								结束面试
							</el-button>
							<el-popover v-if="row.onLineState == 0" :ref="row.id" placement="left" width="410" trigger="click">
								<el-date-picker v-if="row.type" v-model="dataTimeArr" class="width100"
									type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
									format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" :picker-options="pickerOptions2"
									:default-time="['08:00:00', '20:00:00']" @change="modifyTime(row,true)" />
								<el-date-picker v-else v-model="dataTime" class="width100" type="datetime"
									placeholder="选择时间" default-time="08:00:00" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
									:picker-options="pickerOptions" @change="modifyTime(row,false)" />
								<!-- <el-button type="primary" class="ml10" @click="modifyTime(row)">确定</el-button>
                <el-button class="ml10" @click="closeTime(row)">取消</el-button> -->
								<el-button slot="reference" type="text">修改面试时间</el-button>
							</el-popover>
							<el-button  type="text" class="ml10"
								@click="openVideoView(row.id)">
								进入会议室
							</el-button>
              <el-button v-if="row.onLineState == 1 && row.viewResult != 0 && row.viewResult != 1" type="text"
								@click="markRes(row,$index)"> <!--:disabled="row.state == 2 || row.state==3"-->
								反馈面试结果
							</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total>0" :total="total" next-text="下一页" layout="prev, pager, next, jumper"
					:page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getList" />

			</el-tab-pane>
    </el-tabs>
	<pdf-dialog ref="pdfDialog" @transportShow="transportShow" @employShow="employShow" @markRes="markRes"
					@interviewShow="interviewShow" @refresh="refresh" />
	<forward-drawer ref="transportDrawer" @refresh="refresh" />
	<interview-results-drawer ref="resDrawer" @refresh="refresh" />
	<interview-drawer ref="interviewDrawer" @refresh="refresh" />
	<employ-drawer ref="employDrawer" @refresh="refresh" />
  </div>
</template>

<script>
	import waves from '@/directive/waves' // waves directive
	import Pagination from '@/components/Pagination' // secondary package based on el-pagination
	import PdfDialog from '@/components/PdfDialog'
	import forwardDrawer from '@/components/CurriculumVitaeStateDrawer/forwardDrawer.vue'
	import interviewResultsDrawer from '@/components/CurriculumVitaeStateDrawer/interviewResultsDrawer.vue'
	import interviewDrawer from '@/components/CurriculumVitaeStateDrawer/interviewDrawer.vue'
	import employDrawer from '@/components/CurriculumVitaeStateDrawer/employDrawer.vue'
	import sitem from '@/components/searchItem/index.vue'
	import {
		faceList
	} from '@/api/index'
	import {
		editInterView,
		queryByIdInterView,
		viewStart,
		viewEnd
	} from '@/api/personnel'
  import {
		roomNoPageList
	} from '@/api/conferenceRoom'
	export default {
		components: {
			Pagination,
			PdfDialog,
			sitem,
			forwardDrawer,
			interviewResultsDrawer,
			interviewDrawer,
			employDrawer
		},
		directives: {
			waves
		},
		filters: {
			statusFilter(status) {
				switch (status) {
					case 0:
						return '未开始'
						break
					case 1:
						return '已面试待反馈'
						break
					case 2:
						return '面试通过'
						break
					case 3:
						return '面试未通过'
						break
					default:
						break
				}
			}
		},
		data() {
			return {
				pickerOptions2: {
					disabledDate: (time) => {
						return time.getTime() < Date.now() - 8.64e7;
						//大于当前的禁止，小于7天前的禁止
					}
				},
        activeName:'first',
				tableKey: 0,
				list: null,
				total: 0,
				listLoading: true,
				days: [{
						value: '0',
						label: '不限制'
					},
					{
						value: '1',
						label: '今天之前'
					},
					{
						value: '2',
						label: '今天'
					},
					{
						value: '3',
						label: '今天后'
					}
				],
				listQuery: {
					pageNo: 1,
					pageSize: 10,
					sort: false,
					jobName: '',
					nameOrPhone: '',
					dayFlag: '',
					type: 0, //0 现场面试 1视频面试
				},
				dialogVisible: false,
				timeDialogShow: false,
				dataTime: '',
				dataTimeArr: [],
				visible: false,
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7 // 当天之后的时间可选
					}
				}
			}
		},
		created() {
			this.getList()
		},
		methods: {
      //结束面试
      viewEnd(id){
        viewEnd({
					id: id
				}).then(res => {
          this.$message.success('面试已结束')
          this.getList()
				})
      },
      //开始面试
      viewStart(id){
        viewStart({
					id: id
				}).then(res => {
					this.$message.success('面试已开始')
					this.getList()
				})
      },
      //tab切换
			handleClick(tab, event) {
				if (this.activeName == 'first') {
					this.listQuery.type = 0
				} else {
					this.listQuery.type = 1;
				}
				this.getList();
			},
			openVideoView(id) {
				queryByIdInterView({
					id: id
				}).then(res => {
					if (res.result.r1) {
						window.open(res.result.r1)
					} else {
						this.$message.error('会议还未开始')
					}
				})

			},
			refresh() {
				this.getList()
				if (this.$refs.pdfDialog.dialogVisible && this.$refs.pdfDialog.showHis) {
					this.$refs.pdfDialog.getList()
				}
			},
			// 查看信息
			viewInfo(row) {
				if (row.userInfo.delFlag) {
					this.$message.error('此人已被删除！')
					return false
				}
				row.jobInfo = row.job
				row.lanType = row.resumeVO.lanType // 投递的简历语言类型  0 中文 1英文
				row.type = row.resumeVO.type // 投递的简历文件类型 0 在线 1附件
				row.dataId = row.delId // 投递记录id
				this.$refs.pdfDialog.show(row, false, true) // 第二个参数 查看投递记录tab 第三个参数 显示时间轴
			},
			// 发送简历
			transportShow(e) {
				console.log(e)
				this.$refs.transportDrawer.show(e.name, e.jobName, e.reId)
			},
			// 再次面试
			interviewShow(e) {
				this.$refs.interviewDrawer.show(e.name, e.id, e.jobName, e.jobId, e.companyId, e.reId, e.dataId,
					true) // 最后一个参数 不修改状态
			},
			// 反馈面试结果
			markRes(e) {
				this.$refs.resDrawer.show(e.id, e.userId, e.delId)
			},
			// 录用
			employShow(e) {
				this.$refs.employDrawer.show(e.name, e.userId, e.jobId, e.componyId, e.id)
			},
			// 分页数据
			getList() {
				this.listLoading = true
				faceList(this.listQuery).then(response => {
					this.list = response.result.records
					this.total = response.result.total
					this.listLoading = false
				})
        this.roomList = [];
				roomNoPageList({}).then(response => {
					var roomList = response.result
					for (var i in roomList) {
						this.roomList.push({
							'label': roomList[i].roomName,
							'value': roomList[i].id
						});
					}
				})
			},
			// 搜索
			handleFilter() {
				this.listQuery.pageNo = 1
				this.getList()
			},
			// 修改面试时间
			modifyTime(row, flag) {
				// let form = { id: row.id, userId: row.userInfo.userId, jobId: row.jobId,type: row.type};
				let form = {
					id: row.id
				};
				if (flag) {
					let arr = this.dataTimeArr;
					form.time = arr[0];
					form.interviewEndTime = arr[1];
				} else {
					form.time = this.dataTime
				}
				editInterView(form).then(response => {
					this.$message.success('修改成功')
					this.getList()
					this.closeTime(row)
				})
			},
			closeTime(row) {
				this.$refs[row.id].doClose()
			},
			// 标记入职
			markEntry(row, index) {
				this.$notify({
					title: '提示',
					message: '入职成功',
					type: 'success',
					duration: 2000
				})
				// this.list.splice(index, 1)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.filter-container {
		line-height: 36px;
		font-size: 14px;
		margin-bottom: 10px;

		.filter-item {
			margin-bottom: 0;
		}
	}
</style>
